<template>
  <div class="game1">
    <div v-for="(item,i) in itemList" :key="i">{{ item.desc }}</div>
  </div>
  <!-- 扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果 -->
  <p>/*绘制一个60度扇形*/</p>
  <div class="shanxing shanxing1">
    <div class="sx1"></div>
    <div class="sx2"></div>
  </div>
  <p>/*绘制一个85度扇形*/</p>
  <div class="shanxing shanxing2">
    <div class="sx1"></div>
    <div class="sx2"></div>
  </div>
  <p>/*绘制一个向右扇形，90度扇形*/</p>
  <div class="shanxing shanxing3">
    <div class="sx1"></div>
    <div class="sx2"></div>
  </div>
  <p>/*绘制一个颜色扇形 */</p>
  <div class="shanxing shanxing4">
    <div class="sx1"></div>
    <div class="sx2"></div>
  </div>

  <p>/*绘制一个不同颜色半圆夹角 */</p>
  <div class="shanxing shanxing5">
    <div class="sx1"></div>
    <div class="sx2"></div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue'
interface IItem{
  desc:string
  percent:number
}
export default defineComponent({
  name: 'Game1',
  setup () {
    // codes here
    const state = reactive<{
      itemList:IItem[]
    }>({
      itemList: [{ desc: '￥1', percent: 30 }, { desc: '￥10', percent: 25 }, { desc: '￥50', percent: 20 }, { desc: '￥100', percent: 15 }, { desc: '￥500', percent: 10 }, { desc: '￥1314', percent: 5 }]
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang='scss' scoped>
.game1{
  width:500px;
  height: 500px;
}
.shanxing{
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: yellow;
        }
        .sx1{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
            border-radius: 100px;
            background-color: #f00;
            /*-webkit-animation: an1 2s infinite linear; */
        }

        .sx2{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px);
            border-radius: 100px;
            background-color: #f00;
            /*-webkit-animation: an2 2s infinite linear;*/
        }
        /*绘制一个60度扇形*/
        .shanxing1 .sx1{transform: rotate(-30deg);}
        .shanxing1 .sx2{transform: rotate(-150deg);}

        /*绘制一个85度扇形*/
        .shanxing2 .sx1{transform: rotate(-45deg);}
        .shanxing2 .sx2{transform: rotate(-140deg);}

        /*绘制一个向右扇形，90度扇形*/
        .shanxing3 .sx1{transform: rotate(45deg);}
        .shanxing3 .sx2{transform: rotate(-45deg);}

        /*绘制一个颜色扇形 */
        .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
        .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

        /*绘制一个不同颜色半圆夹角 */
        .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
        .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
</style>
